<template>
	<view class="w-full h-full" style="position: relative;width: 100vw;height: 100vh;">
		<view class="content flex items-center justify-center w-full h-full">
			<view class="flex bgsmall w-full h-full" v-if="miniDialogShow">
				<view class="w-full flex-col" style="position: relative">
					<view class="flex items-end justify-center w-full" style="
							color: #fff;
							font-size: 14px;
							position: absolute;
							bottom: 22px;
							z-index: 99999999999999999999999;
						  ">
						<view class="flex items-center justify-center bg1" @click="changeType('0')"
							style="width: 95px; height: 52px; cursor: pointer">
							<image style="width: 18px; height: 18px; margin-right: 5px" src="@/static/yuyin.png"
								mode="">
							</image>
							<span>语音</span>
						</view>
						<view class="flex items-center justify-center bg2" @click="changeType('1')"
							style="width: 95px; height: 52px; cursor: pointer">
							<image style="width: 18px; height: 18px; margin-right: 5px" src="@/static/chat.png
									" mode=""></image>
							<span>聊天</span>
						</view>
					</view>
					<view class="w-full flex justify-center items-center"
						style="position: absolute; z-index: 9999; bottom: 10px">
					</view>
				</view>
			</view>

			<view v-if="!dialogSmallShow" class="flex-col w-full h-full" style="overflow: hidden; position: relative">
				<view class="" @click="changeType('2')" :style="{ color: textDialogShow ? '#333' : '#FFF' }" style="
						  cursor: pointer;
						  padding: 10px;
						  position: absolute;
						  top: 10px;
						  right: 10px;
						  z-index: 9999999999;
						">
					<text>X</text>
				</view>
				<!-- 问答 -->
				<view class="w-full h-full flex-col textc" v-if="textDialogShow == true && miniDialogShow == false"
					style="padding: 16px 16px 5px 16px; z-index: 999999">
					<view class="flex items-center">
						<image style="width: 36px; height: 36px; margin-right: 8px" src="../../static/avatar.png"
							mode="">
						</image>
						<view class="flex-col">
							<text style="font-size: 14px; font-weight: bold; color: #212121">{{ titleObj.title }}</text>
							<text
								style="font-weight: 400; font-size: 12px; color: #535363">{{ titleObj.subtitle }}</text>
						</view>
					</view>

					<view class="hsc" ref="scrollContainer"
						style="margin-top: 42px; padding-bottom: 20px; overflow-y: auto">
						<!-- 问答对话 -->
						<conversation DeviceType="pc" />
					</view>

					<view class="flex-col" style="margin-top: auto">
						<!-- 固定写死 pc -->
						<sendinput DeviceType="pc"></sendinput>
					</view>
				</view>
				<!-- 语音 -->
				<view class="h-full" v-if="textDialogShow == false && miniDialogShow == false">
					<pcVoice />
				</view>
			</view>
		</view>
		<!-- <view class="" style="position: absolute; inset: 0">
			<SZR SZR_class="miniSZR" :Device="currentDevice" style="width: 100%; height: 100%" />
		</view> -->
		<view class="szr-outer" style="position: absolute; inset: 0">
			<!-- 123 -->
			<GZHSZR SZR_class="miniSZR" :Device="currentDevice" style="width: 100%; height: 100%" />
		</view>
	</view>

</template>

<script>
	import conversation from "../../components/conversation.vue";
	import sendinput from "../../components/sendinput.vue";
	import {
		getRuntimeEnv
	} from "@/utils/env.js";
	import GZHSZR from "../../components/szrGZH.vue";
	import SZR from "../../components/szrnew.vue";
	import pcVoice from "@/components/pcVoice.vue";
	import {
		useConversationStore
	} from "../../store";
	import {
		ProBaseUrl,
		member_id
	} from "../../common/config";

	const conversationStore = useConversationStore();
	export default {
		data() {
			return {
				SZR_SHOW: false,
				PcCode: "",
				userInfo: {},
				miniDialogShow: true,
				textDialogShow: false,
				currentDevice: "",
				fastSendWrapShow: true,
				dialogSmallShow: true,
				bgheight: 0,
				bgwidth: 0,
				hiddenMobile: false,
				maxSize: {
					width: "200px",
					height: "350px",
					minHeight: "350px",
					minWidth: "200px",
					overflow: "hidden",
					position: "fixed",

					width: "100%",
					height: "100%",
					position: "",
				},
				AMQuestionList: [
					"介绍一下自己",
					"介绍一下高博会",
					"展会时间",
					"观众进馆时间",
					"参展商进馆时间",
				],
			};
		},
		components: {
			conversation,
			sendinput,
			SZR,
			pcVoice,
			GZHSZR
		},
		computed: {
			titleObj() {
				return {
					title: conversationStore.title,
					subtitle: conversationStore.subtitle,
				};
			},
			SuggestList() {
				console.log(conversationStore.message_suggestedList);
				return conversationStore.message_suggestedList;
			},
		},
		onLoad() {
			this.postMessageToApp({
				type: "initSZR",
			});
		},
		created() {
			this.currentDevice = this.isWeiXin();
			if (this.currentDevice !== "") {
				conversationStore.ChangeDevice(this.currentDevice);
			}
		},
		mounted() {
			this.$eventBus.$on("scrollBottom", () => this.scrollBottom());
		},
		beforeDestroy() {
			this.$eventBus.$off("sendMessage");
			this.$eventBus.$off("scrollBottom");

		},
		methods: {
			getAMQusetionList() {
				fetch(`${ProBaseUrl}/api/m${member_id}/682f0a5160a79`)
					.then((res) => res.json())
					.then((res1) => {
						console.log("res112312312", res1);
						if (res1.code == "1" && res1.data && res1.data.length) {
							this.AMQuestionList = res1.data.map((item) => item.q);
						}
					});
			},
			scrollBottom() {
				this.$nextTick(() => {
					const container = this.$el.querySelector(".hsc");
					if (container) {
						container.scrollTop = container.scrollHeight;
					}
				});
			},
			detectDevice() {
				const hasTouchScreen =
					navigator.maxTouchPoints > 0 ||
					"ontouchstart" in window ||
					navigator.msMaxTouchPoints > 0;

				// 检查用户代理
				const userAgent = navigator.userAgent.toLowerCase();
				const isMobileUA =
					/phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|blackberry|iemobile|mqqbrowser/i.test(
						userAgent
					);

				// 检查屏幕宽度
				const screenWidth = window.screen.width;
				const isMobileScreen = screenWidth <= 768;

				// 综合判断
				if (hasTouchScreen && isMobileUA && isMobileScreen) {
					return "mobile";
				} else {
					return "pc";
				}
			},
			isWeiXin() {
				var ua = navigator.userAgent.toLowerCase();
				console.log("ua", ua);
				if (
					ua.match(/MicroMessenger/i) == "micromessenger" &&
					window.screen.width < 768
				) {
					console.log("微信公众号环境");
					this.maxSize = {
						width: "100%",
						position: "",
						height: "100%",
					};
					return "wx";
				}
			},

			// 0语音 1聊天 2x
			changeType(type) {
				if (type == 0) {
					this.maxSize = {
						width: "100%",
						height: "100%",
						minWidth: "345px !important",
						position: "fixed",
						minHeight: "600px !important",
					};

					this.dialogSmallShow = false;
					this.miniDialogShow = false;
					this.maxSize = {
						...this.maxSize,
						borderRadius: "26px",
						overflow: "hidden",
					};
					conversationStore.ResetMessageSuggestedList();
				} else if (type == 1) {
					this.maxSize = {
						width: "100%",
						height: "100%",
						minWidth: "345px !important",
						position: "fixed",
						minHeight: "600px !important",
					};

					this.miniDialogShow = false;
					this.textDialogShow = true;
					this.maxSize = {
						...this.maxSize,
						borderRadius: "26px",
						overflow: "hidden",
					};
					this.dialogSmallShow = false;
					conversationStore.ResetMessageSuggestedList();
				} else {
					this.dialogSmallShow = true;
					this.miniDialogShow = true;
					this.textDialogShow = false;
					this.maxSize = {
						minHeight: "350px",
						minWidth: "200px",
						overflow: "hidden",

						width: "100%",
						height: "100%",
						position: "",
					};
					this.$nextTick(() => {
						console.log(document.querySelector(".miniSZR .shuziren-chat"));
						document.querySelector(".shuziren-chat").style.display = "none";
					});
				}
			},

			postMessageToApp(data) {
				parent.postMessage(data, "*");
			},
			scrollToBottom() {
				this.$nextTick(() => {
					const container = this.$refs.scrollContainer;
					if (container) {
						container.scrollTop = container.scrollHeight;
					}
				});
			},
			fastSend(item) {
				this.$eventBus.$emit("sendItem", {
					data: item,
					type: "AM",
				});
			},
			send(item) {
				this.vocieInput = item;
			},
		},
	};
</script>

<style>
	.szr-outer {
		background: url("~@/static/gwszrbj.png") center center / 100% 100% no-repeat;
	}

	.bgsmall {
		/* background: url('~@/static/smallbg.png') center center / 100% 100% no-repeat; */
	}

	.bg1 {
		background: url("~@/static/bg1.png") center center / 100% 100% no-repeat;
	}

	.bg2 {
		background: url("~@/static/bg2.png") center center / 100% 100% no-repeat;
	}

	.voice {
		/* background: url('~@/static/voicebgwx.png') center center / 100% 100% no-repeat; */
		height: 100%;
		overflow: hidden;
		/* background-image: url('~@/static/voicebgwx.png'); */
		background-size: cover;
		/* 保持宽高比，完全覆盖容器 */
		background-position: center;
		background-repeat: no-repeat;
	}

	.wxitem {
		background: url("~@/static/wxitem1.png") center center no-repeat;
		background-size: 100% 100%;
		/* background-size: contain; */
	}

	.textc {
		background: url("~@/static/textconversion.png") center center / 100% 100% no-repeat;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.zoom-enter-active,
	.zoom-leave-active {
		transition: all 0.3s ease;
		transform-origin: right bottom;
	}

	.zoom-enter,
	.zoom-leave-to {
		transform: scale(0);
		opacity: 0;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	.miniSZR .szg-szr-box {
		position: relative;
		display: flex;
		width: 200px !important;
		height: 300px !important;
		align-items: center;
		padding-top: 40px;
	}

	.voiceSZR .szg-szr-box {
		position: relative;
		display: flex;
		width: 400px !important;
		height: 800px !important;
		align-items: center;
		padding-top: 40px;
	}

	.advermachineSZR .szg-szr-box {
		position: relative;
		display: flex;
		width: 100% !important;
		height: 100% !important;
		align-items: center;
		padding-top: 40px;
	}

	:deep(.miniSZR .szg-szr-box .shuziren-page) {
		min-width: 200px !important;
		min-height: 200px !important;
	}

	:deep(.voiceSZR .szg-szr-box .shuziren-page) {
		min-width: 400px !important;
		min-height: 400px !important;
	}

	.szg-szr-box .shuziren-page {
		min-width: 120px !important;
		min-height: 120px !important;
	}

	.sendicon {
		background: url("~@/static/send.png") center center / 100% 100% no-repeat;
	}

	.sendicon:hover {
		background: url("~@/static/sendactive.png") center center / 100% 100% no-repeat;
	}

	:deep(.AdvertisingMachineContainer .shuziren-chat.is-share-h5) {
		bottom: 33% !important;
	}
</style>